<template>
  <div class="index">
    <!-- 标签栏 -->
    <van-tabs
      v-model="activeName"
      background="#8BA693"
      color="#fff"
      title-active-color="#fff"
      title-inactive-color="#DDDEDD"
    >
      <!-- 身份 -->
      <van-tab title="身份" name="a">
        <van-tree-select
          height="14rem"
          :items="items"
          :active-id.sync="activeId"
          :main-active-index.sync="activeIndex"
          @click-item="onItemClick"
        />
      </van-tab>
      <!-- 记录 -->
      <van-tab title="记录" name="b">
        <!-- 物资捐赠者 -->
        <MaterialDonation v-if="MaterialDonation"></MaterialDonation>
        <Contribution v-if="Contribution"></Contribution>
        <!-- 慈善机构 -->
        <InStorage v-if="InStorage"></InStorage>
        <OutStorage v-if="OutStorage"></OutStorage>
        <!-- 物资使用者 -->
        <ReceiveMaterial v-if="ReceiveMaterial"></ReceiveMaterial>
        <DemandMaterials v-if="DemandMaterials"></DemandMaterials>
        <PurchaseMaterials v-if="PurchaseMaterials"></PurchaseMaterials>
        <!-- 物资供货商 -->
        <ProductionPlan v-if="ProductionPlan"></ProductionPlan>
        <ProductStorage v-if="ProductStorage"></ProductStorage>
        <SalesOutlet v-if="SalesOutlet"></SalesOutlet>
        <!-- 物流公司 -->
        <LogisticsCompany v-if="LogisticsCompany"></LogisticsCompany>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import MaterialDonation from "../lists/MaterialDonation";
import Contribution from "../lists/Contribution";
import InStorage from "../lists/InStorage";
import OutStorage from "../lists/OutStorage";
import ReceiveMaterial from "../lists/ReceiveMaterial";
import DemandMaterials from "../lists/DemandMaterials";
import PurchaseMaterials from "../lists/PurchaseMaterials";
import ProductionPlan from "../lists/ProductionPlan";
import ProductStorage from "../lists/ProductStorage";
import SalesOutlet from "../lists/SalesOutlet";
import LogisticsCompany from "../lists/LogisticsCompany";

export default {
  name: "Index",
  data() {
    return {
      MaterialDonation: false, // 物资捐赠者_物资捐赠
      Contribution: false, // 资金捐赠
      InStorage: false, // 慈善机构_物资入库
      OutStorage: false, // 慈善机构_资金出库
      ReceiveMaterial: false, // 物资使用者_领用物资
      DemandMaterials: false, // 物资使用者_需求物资
      PurchaseMaterials: false, // 物资使用者_采购物资
      ProductionPlan: false, // 物资供货商_生产计划
      ProductStorage: false, // 物资供货商_生产计划
      SalesOutlet: false, // 物资供货商_销售出库
      LogisticsCompany: false, // 物资供货商_销售出库
      activeName: "a", //标签栏
      activeComponent: "", //添加一个空的字符串用来判断子组件显示隐藏
      // 身份选择
      activeId: "code", //第二级
      activeIndex: 0, //第一级
      items: [
        {
          text: "物资捐赠者",
          children: [
            {
              id: 1,
              text: "物资捐赠"
            },
            {
              text: "资金捐赠",
              id: 2
            }
          ]
        },
        {
          text: "慈善机构",
          children: [
            {
              text: "入库物资",
              id: 3
            },
            {
              text: "出库物资",
              id: 4
            },
            {
              text: "资金捐赠",
              id: 2
            }
          ]
        },
        {
          text: "物资使用者",
          children: [
            {
              text: "入库物资",
              id: 3
            },
            {
              text: "领用物资",
              id: 5
            },
            {
              text: "需求物资",
              id: 6
            },
            {
              text: "采购物资",
              id: 7
            }
          ]
        },
        {
          text: "物资供货商",
          children: [
            {
              text: "生产计划",
              id: 8
            },
            {
              text: "产成品入库",
              id: 9
            },
            {
              text: "销售出库",
              id: 10
            },
            {
              text: "捐赠出库",
              id: 1
            },
            {
              text: "资金捐赠",
              id: 2
            }
          ]
        },
        {
          text: "物流公司",
          children: [
            {
              text: "物流公司",
              id: 11
            }
          ]
        }
      ]
    };
  },
  methods: {
    // 二级菜单
    onItemClick(id) {
      let num = JSON.stringify(id.id);
      this.activeName = "b";
      switch (num) {
        case "1":
          this[this.activeComponent] = false;
          this.activeComponent = "MaterialDonation";
          this[this.activeComponent] = true;
          break;
        case "2":
          this[this.activeComponent] = false;
          this.activeComponent = "Contribution";
          this[this.activeComponent] = true;
          break;
        case "3":
          this[this.activeComponent] = false;
          this.activeComponent = "InStorage";
          this[this.activeComponent] = true;
          break;
        case "4":
          this[this.activeComponent] = false;
          this.activeComponent = "OutStorage";
          this[this.activeComponent] = true;
          break;
        case "5":
          this[this.activeComponent] = false;
          this.activeComponent = "ReceiveMaterial";
          this[this.activeComponent] = true;
          break;
        case "6":
          this[this.activeComponent] = false;
          this.activeComponent = "DemandMaterials";
          this[this.activeComponent] = true;
          break;
        case "7":
          this[this.activeComponent] = false;
          this.activeComponent = "PurchaseMaterials";
          this[this.activeComponent] = true;
          break;
        case "8":
          this[this.activeComponent] = false;
          this.activeComponent = "ProductionPlan";
          this[this.activeComponent] = true;
          break;
        case "9":
          this[this.activeComponent] = false;
          this.activeComponent = "ProductStorage";
          this[this.activeComponent] = true;
          break;
        case "10":
          this[this.activeComponent] = false;
          this.activeComponent = "SalesOutlet";
          this[this.activeComponent] = true;
          break;
        case "11":
          this[this.activeComponent] = false;
          this.activeComponent = "LogisticsCompany";
          this[this.activeComponent] = true;
          break;
      }
    }
  },
  components: {
    MaterialDonation,
    Contribution,
    InStorage,
    OutStorage,
    ReceiveMaterial,
    DemandMaterials,
    PurchaseMaterials,
    ProductionPlan,
    ProductStorage,
    SalesOutlet,
    LogisticsCompany
  }
};
</script>
<style>
#index {
  width: 100%;
  height: 100%;
  background: #f2f2f2;
}

.btn {
  width: 80%;
  height: 3rem;
  border-radius: 3rem;
  border: none;
  background: #8ba693;
  color: #fff;
  display: block;
  margin: 1.5rem auto 0;
}
</style>